<template>
  <div class="dashboard-editor-container">
    <el-row
      style="
        background: #fff;
        padding: 16px 16px 0;
        margin-bottom: 32px;
        height: 650px;
      "
    >
      <el-col :xs="24" :sm="24" :lg="8" style="width: 100px; height: 600px">
        <compare />
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <tabledata></tabledata>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8" style="width: 100px; height: 600px">
        <div style="width: 100px; height: 500px; margin-bottom: 32px">
          <mainchart />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import compare from "./components/compare.vue";
import tabledata from "./components/tabledata.vue";
import mainchart from "./components/mainchart.vue";

export default {
  components: {
    compare,
    tabledata,
    mainchart,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}

.dashboard-editor-container .chart-wrapper {
  background: #fff;
  padding: 16px 16px 0;
  margin-bottom: 32px;
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
